<template>
    <div class="biankuang">
        <div class="codeManage">
            <div class="codeManage_up">
                <button type="button" class="btn btn-success" @click="search(0)">所有公司</button>
                <div class="search_input form-inline">
                    <div class="input-radio">
                        <label for="1" class="radio-inline">
                            <input type="radio" name="radioSelect" id="1" value="1" v-model="search_id">批号
                        </label>
                        <label for="2" class="radio-inline">
                            <input type="radio" name="radioSelect" id="2" value="2" v-model="search_id">公司
                        </label>
                        <label for="3" class="radio-inline">
                            <input type="radio" name="radioSelect" id="3" value="3" v-model="search_id">品种
                        </label>
                    </div>
                    <input type="text" class="form-control" v-model="search_text">
                    <button type="button" class="btn btn-success search-button" @click="search(search_id,search_text)">搜索</button>
                </div>
                <div style="clear: both"></div>
            </div>

            <div class="codeManage_mid">
                <table class="table table-hover">
                    <thead>
                    <tr class="success">
                        <th>二维码批号</th>
                        <th>公司名称</th>
                        <th>品种名称</th>
                        <th>生成时间</th>
                        <th>二维码数量</th>
                        <th>已激活数量</th>
                        <th>下载二维码</th>
                        <th>查看记录</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in codeList">
                        <td>{{item.codePiNO}}</td>
                        <td>{{item.epname}}</td>
                        <td>{{item.typename}}</td>
                        <td>{{item.codecreatetime}}</td>
                        <td>{{item.codeNum}}</td>
                        <td>{{item.activeNum}}</td>
                        <td><a href="{{item.download}}">下载</a></td>
                        <td><a v-link="{ path: item.codeDetailUrl }">查看详情</a>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="footer">
                <div class="nextpage-body">
                    <button type="button" class="btn btn-success first-page" @click="nextPage(1)">首页</button>
                    <button type="button" class="btn btn-success pre-page" @click="nextPage(2)">上一页</button>
                    <button type="button" class="btn btn-success next-page" @click="nextPage(3)">下一页</button>
                    <button type="button" class="btn btn-success last-page" @click="nextPage(4)">尾页</button>
                    <span class="panel panel-default page-info">每页 {{rows}} 条，当前页：{{page}}， 总页数： {{count}}</span>
                    <input type="text" class="panel panel-default input-page" placeholder="输入..." v-model="go"/>
                    <button class="btn btn-success submit-page" type="button" @click="setData(go,rows)">跳转</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                codeList: [],
                page: 1,
                rows: 15,
                count: 1,
                remoteData: [],
                search_id: '',
                search_text: '',
                codeDetailUrl: ''
            }
        },
        ready: function () {
            this.search(0);
        },
        methods: {
            search: function (choose, args) {
                var _this = this;
                var obj = {};
                if (choose == '0') {
                    obj = {'choose': 0};
                }
                if (choose == '1') {
                    obj = {'choose': 1, 'codePiNO': args}
                }
                if (choose == '2') {
                    obj = {'choose': 2, 'epName': args}
                }
                if (choose == '3') {
                    obj = {'choose': 3, 'typeName': args}
                }
                $.post('/QRcode/CodeManageList', obj).then(function (data) {
                    var temp = data.content.list.length / 15;
                    _this.count = parseInt(temp);
                    if (temp > _this.count) {
                        _this.count++;
                    }
                    _this.page = 1;
                    _this.rows = 15;
                    // 保存到全局变量
                    _this.remoteData = data.content.list;
                    // 处理数据
                    _this.setData(_this.page, _this.rows);
                });
            },
            nextPage: function (sw) {
                var _this = this;
                switch (sw) {
                    case 1:
                        _this.page = 1;
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 2:
                        if (_this.page > 1) {
                            _this.page--;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 3:
                        if (_this.page < _this.count) {
                            _this.page++;
                        }
                        _this.setData(_this.page, _this.rows);
                        break;
                    case 4:
                        _this.page = _this.count;
                        _this.setData(_this.page, _this.rows);
                        break;
                }
            },
            setData: function (page, rows) {
                var _this = this;
                var list = _this.remoteData;
                // 清空当前数据
                _this.codeList = [];
                if (page < 1) {
                    page = 1;
                }
                if (page > _this.count) {
                    page = _this.count;
                }

                var index = (page - 1) * rows;
                // 每页15条记录
                for (var i = index; i < list.length && i < (index + rows); i++) {
                    var obj = {
                        "codePiNO": list[i].codePiNO,
                        "epname": list[i].epname,
                        "typename": list[i].typename,
                        "codecreatetime": list[i].codecreatetime,
                        "codeNum": list[i].codeNum,
                        "activeNum": list[i].activeNum,
                        "download": "/QRcode/DownloadCodeZipFile?codePiNO=" + list[i].codePiNO,
                        "codeDetailUrl": "/index/codedetail/"+(list[i].codePiNO)
                    };
                    _this.codeList.push(obj);
                }
            }
        }
    }
</script>

<style>
    .biankuang {
        background-color: #FFFFFF;
        border: 1px #1e88e5 solid;
        border-radius: 5px;
        padding: 10px;
    }

    .codeManage_up {
        width: 100%;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .codeManage_up .input-radio {
        display: inline-block;
        margin-right: 15px;
    }

    .codeManage_up .search-button {
        height: 35px;
        width: 80px;
        padding: 5px 10px;
    }

    .codeManage_up .search_input {
        float: right;
        width: auto;
    }

    .codeManage_mid {
        margin-top: 20px;
        text-align: center;
    }

    .codeManage_mid th {
        text-align: center;
    }

    .footer {
        width: 100%;
        margin-bottom: 15px;
    }

    .footer .nextpage-body {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        height: 40px;
    }

    .footer .nextpage-body .first-page,
    .footer .nextpage-body .pre-page,
    .footer .nextpage-body .next-page,
    .footer .nextpage-body .last-page,
    .footer .nextpage-body .submit-page {
        width: 100px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .footer .nextpage-body .page-info {
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 35px;
    }

    .footer .nextpage-body .input-page {
        display: inline-block;
        padding: 0 5px 0 5px;
        width: 65px;
        height: 35px;
        line-height: 35px;
    }
</style>
